<template>
  <li>
    <el-checkbox :checked="todo.completed" @change="toggleCompleted" />
    <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
    <el-button type="danger" @click="removeTodo">删除</el-button>
  </li>
</template>

<script>
export default {
  props: {
    todo: {
      type: Object,
      required: true
    },
    index: {
      type: Number,
      required: true
    }
  },
  methods: {
    removeTodo() {
      this.$emit('remove', this.index)
    },
    toggleCompleted() {
      this.$emit('toggle', this.index)
    }
  }
}
</script>

<style scoped>
.completed {
  text-decoration: line-through;
  color: gray;
}
</style>
